<template>
	<view :data-theme="theme">
		<tui-skeleton v-if="skeletonShow"></tui-skeleton>
		<view class="product-con tui-skeleton">
			<view class="navbar">
				<u-navbar bgColor="transparent" color="#30303C" :placeholder="true">
					<template #left>
						<view
							id="home"
							class="home acea-row row-center-wrapper iconfont icon-dingbufanhui h5_back tui-skeleton-circular"
							v-if="returnShow"
							@tap="returns"
						>
						</view>
					</template>
					<template #center>
						<view
							:style="{
								width: '550rpx',
								marginLeft: returnShow ? '90rpx' : '24rpx',
								marginRight: '24rpx',
								paddingRight: btnRight + 'px',
							}"
						>
							<navigator
								url="/pages/goods_search/index"
								class="input"
								hover-class="none"
								><text class="iconfont icon-xiazai5 tui-skeleton-fillet"></text>
								{{ $t(`page.goodsDetail.search`) }}
							</navigator>
						</view>
					</template>

					<!-- <view slot="right" style="color:#30303C" class="iconfont icon-more" @click="open"></view> -->
				</u-navbar>
				<!-- <view class="tab_nav" v-show="opacity > 0.6">
					<view class="header flex justify-between align-center">
						<view
							class="item"
							:class="navActive === index ? 'on' : ''"
							v-for="(item, index) in navList"
							:key="index"
							@tap="tap(index)"
							>{{ $t(`page.goodsDetail.navList[${index}].name`) }}
						</view>
					</view>
				</view> -->
			</view>
			<view class="detail_container">
				<scroll-view
					:scroll-top="scrollTop"
					scroll-y="true"
					scroll-with-animation="true"
					:style="'height:' + height + 'px;'"
					@scroll="scroll"
				>
					<view id="past0" class="detailPd">
						<productConSwiper
							class="tui-skeleton-rect"
							:imgUrls="sliderImage"
							:videoline="videoLink"
							@videoPause="videoPause"
						></productConSwiper>
						<view class="pad24 info-wrap">
							<view class="wrapper mb30 borRadius14 goods-info">
								<view class="share acea-row row-between row-bottom">
									<view
										class="x-money tui-skeleton-rect flex align-baseline font-44"
									>
										<statistic
											:value="attr.productSelect.price"
											:currency="attr.productSelect.currency"
										/>
										<view class="old-price">
											<statistic
												:value="attr.productSelect.otPrice || 0"
												:currency="attr.productSelect.currency"
											/>
										</view>
									</view>
									<!-- <view class='iconfont icon-fenxiang' @click="listenerActionSheet"></view> -->
								</view>
								<view class="introduce tui-skeleton-rect">{{
									productInfo.storeName
								}}</view>
								<view class="label acea-row row-between-wrapper">
									<!-- <view class="tui-skeleton-rect label-item">
										{{ $t(`page.goodsDetail.oldPrice`) }}:
										<statistic
											:value="attr.productSelect.otPrice || 0"
											:currency="attr.productSelect.currency"
										/>
									</view> -->
									<view class="tui-skeleton-rect label-item">
										{{ $t(`page.goodsDetail.inventory`) }}:
										{{ attr.productSelect.stock || 0 }}&nbsp;
										<!-- {{ productInfo.unitName || "" }} -->
										{{ $util.translateUnit() }}
									</view>
									<view
										class="tui-skeleton-rect label-item"
										v-if="attr.productInfo.minQty > 1"
									>
										{{ $t(`page.goodsDetail.minQty`) }}:
										{{ attr.productInfo.minQty || 1 }}&nbsp;
										<!-- {{ productInfo.unitName || "" }} -->
										{{ $util.translateUnit() }}
									</view>
									<view class="tui-skeleton-rect">
										{{ $t(`page.goodsDetail.sales`) }}:
										{{
											Math.floor(productInfo.sales) +
												Math.floor(productInfo.ficti) || 0
										}}&nbsp;
										{{ $util.translateUnit() }}
									</view>
								</view>
								<view
									v-if="defaultCoupon.length > 0 && type == 'normal'"
									class="coupon acea-row row-between-wrapper tui-skeleton-fillet"
									@click="couponTap"
								>
									<view class="hide line1 acea-row">
										<text class="text-333 fw-bold"
											>{{ $t(`page.goodsDetail.coupons`) }}:
										</text>
										<view class="activity">${{ defaultCoupon[0].money }}</view>
										<!-- 满{{defaultCoupon[0].minPrice}}减 -->
									</view>
									<view class="iconfont icon-gengduo"></view>
								</view>
							</view>
							<view class="attribute mb30 borRadius14" @click="selecAttr">
								<view class="acea-row row-between-wrapper">
									<view class="line1 tui-skeleton-fillet"
										><text class="text-333 fw-bold"
											>{{ $t(`page.goodsDetail.choose`) }}:
										</text>
										<text class="text-666 tui-skeleton-fillet">{{
											$t(attrValue)
										}}</text>
									</view>
									<view class="iconfont icon-gengduo"></view>
								</view>
								<view
									class="acea-row row-between-wrapper"
									style="margin-top: 7px; padding-left: 55px"
									v-if="skuArr.length > 1"
								>
									<view class="flex">
										<image
											:src="item.image"
											v-for="(item, index) in skuArr.slice(0, 4)"
											:key="index"
											class="attrImg"
										>
										</image>
									</view>
									<view class="switchTxt tui-skeleton-fillet">
										{{ skuArr.length }}{{ $t(`page.goodsDetail.type`) }}</view
									>
								</view>
							</view>
							<view
								v-show="guaranteeList.length > 0"
								class="attribute mb30 borRadius14"
								@click="assureDrawer = true"
							>
								<view class="acea-row row-between-wrapper">
									<view class="line1 tui-skeleton-fillet">
										<text class="text-333 fw-bold"
											>{{ $t(`page.goodsDetail.assure`) }}:
										</text>
										<text
											class="text-666 tui-skeleton-fillet"
											v-for="(item, index) in guaranteeList"
											:key="index"
											>{{ item.name }} ·
										</text>
									</view>
									<view class="iconfont icon-gengduo"></view>
								</view>
							</view>
							<view class="userEvaluation" id="past1">
								<view
									class="title acea-row row-between-wrapper"
									:style="
										replyCount == 0
											? 'border-bottom-left-radius:14rpx;border-bottom-right-radius:14rpx;'
											: ''
									"
								>
									<view class="tui-skeleton-fillet fw-bold">
										{{ $t(`page.goodsDetail.Reviews`) }}({{ replyCount }})</view
									>
									<navigator
										class="praise tui-skeleton-fillet"
										hover-class="none"
										:url="
											'/pages/users/goods_comment_list/index?productId=' + id
										"
									>
										<i class="goods-text line2">{{
											$t(`page.goodsDetail.good`)
										}}</i
										>&nbsp;<text class="font_color px-12"
											>{{ replyChance || 0 }}%</text
										>
										<text class="iconfont icon-gengduo"></text>
									</navigator>
								</view>
								<block v-if="replyCount">
									<userEvaluation :reply="reply"></userEvaluation>
								</block>
							</view>

							<!-- 优品推荐 -->
							<view class="superior borRadius14" :if="merchantInfo" id="past2">
								<merHome
									:merchantInfo="merchantInfo"
									:merid="productInfo.merId"
									type="home"
								></merHome>
								<view class="slider-banner banner">
									<view class="list acea-row row-middle" id="list0">
										<view
											class="item"
											v-for="(val, indexw) in merchantInfo.proList"
											:key="indexw"
											@click="goDetail(val)"
										>
											<view class="pictrue">
												<image :src="val.image" mode="aspectFit"></image>
												<!-- <GoodsImage :image-src="val.image" mode="aspectFit" /> -->
												<!-- <easy-loadimage mode="widthFix" :image-src="val.image" ></easy-loadimage> -->
											</view>
											<view class="name line1">{{ val.storeName }}</view>
											<view class="money theme_price">
												<statistic
													:value="val.price"
													:currency="val.currency"
												/>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="product-intro pad24" id="past3">
						<view class="borRadius14" style="overflow: hidden">
							<view class="title">
								<image src="/static/images/xzuo.png"></image>
								<span class="sp">{{ $t(`page.goodsDetail.details`) }}</span>
								<image src="/static/images/xyou.png"></image>
							</view>
							<view class="conter">
								<u-parse
									:content="translateContent.replace(/<br\/>/gi, '')"
									:tag-style="tagStyle"
								></u-parse>
								<!-- <jyf-parser :html="description.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser> -->
							</view>
						</view>
					</view>
					<view style="height: 120rpx"></view>
				</scroll-view>
			</view>
			<view class="footer acea-row row-between-wrapper">
				<view class="item tui-skeleton-fillet" @click="toHome()">
					<view class="iconfont icon-shouye"></view>
					<!-- <view>{{$t(`page.goodsDetail.home`)}}</view> -->
				</view>
				<block v-if="type === 'normal'">
					<view @click="setCollect" class="item tui-skeleton-fillet">
						<view
							class="iconfont icon-xihuan1 font_color"
							v-if="userCollect"
						></view>
						<view class="iconfont icon-xihuan" v-else></view>
						<!-- <view>{{$t(`page.goodsDetail.like`)}}</view> -->
					</view>
					<navigator
						open-type="switchTab"
						class="animated item tui-skeleton-fillet"
						:class="animated == true ? 'bounceIn' : ''"
						url="/pages/order_addcart/order_addcart"
						hover-class="none"
					>
						<view class="iconfont icon-gouwuche">
							<text v-if="Math.floor(CartCount) > 0" class="num bg_color">{{
								CartCount
							}}</text>
						</view>
						<!-- <view>{{$t(`page.goodsDetail.cart`)}}</view> -->
					</navigator>
					<view
						class="bnt acea-row tui-skeleton-rect"
						v-if="
							attr.productSelect.stock <= 0 ||
							productInfo.minQty > attr.productSelect.stock
						"
					>
						<form report-submit="true">
							<button class="joinCart bnts bg-color-hui" form-type="submit">
								{{ $t(`page.goodsDetail.addCart`) }}
							</button>
						</form>
						<form report-submit="true">
							<button class="buy bnts bg-color-hui" form-type="submit">
								{{ $t(`page.goodsDetail.soldOut`) }}
							</button>
						</form>
					</view>
					<view class="bnt acea-row tui-skeleton-rect" v-else>
						<form @submit="joinCart" report-submit="true">
							<button class="joinCart bnts" form-type="submit">
								{{ $t(`page.goodsDetail.addCart`) }}
							</button>
						</form>
						<form @submit="goBuy" report-submit="true">
							<button class="buy bnts" form-type="submit">
								{{ $t(`page.goodsDetail.buyNow`) }}
							</button>
						</form>
					</view>
				</block>
			</view>
			<!-- 组件 -->
			<productWindow
				:attr="attr"
				:isShow="1"
				:iSplus="1"
				@myevent="onMyEvent"
				@ChangeAttr="ChangeAttr"
				@ChangeCartNum="ChangeCartNum"
				@attrVal="attrVal"
				@iptCartNum="iptCartNum"
				id="product-window"
				@getImg="showImg"
			>
			</productWindow>
			<couponListWindow
				:coupon="coupon"
				:typeNum="couponDeaultType[0].useType"
				@ChangCouponsClone="ChangCouponsClone"
				@ChangCoupons="ChangCoupons"
				@ChangCouponsUseState="ChangCouponsUseState"
				@tabCouponType="tabCouponType"
			>
			</couponListWindow>
			<cus-previewImg
				ref="cusPreviewImg"
				:list="skuArr"
				@changeSwitch="changeSwitch"
			/>
			<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
				<user-drawer @close="closeDrawer"></user-drawer>
			</tui-drawer>
			<tui-drawer mode="bottom" :visible="assureDrawer" @close="closeAssure">
				<view class="ensure">
					<view class="title"
						>{{ $t(`page.goodsDetail.assure`)
						}}<text class="iconfont icon-guanbi5"></text>
					</view>
					<view class="list">
						<view
							class="item acea-row"
							v-for="(item, index) in guaranteeList"
							:key="index"
						>
							<view class="pictrue">
								<image :src="item.icon"></image>
							</view>
							<view class="text">
								<view class="name">{{ item.name }}</view>
								<view>{{ item.content }}</view>
							</view>
						</view>
					</view>
					<view class="bnt" @click="assureDrawer = false">{{
						$t(`page.users.orderList.complete`)
					}}</view>
				</view>
			</tui-drawer>
			<view class="mask" v-if="canvasStatus"></view>
		</view>
	</view>
</template>

<script>
import statistic from "@/components/statistic";
import {
	getProductDetail,
	collectAdd,
	collectDel,
	postCartAdd,
	getReplyConfig,
	getReplyProduct,
} from "@/api/store.js";
import { getCoupons } from "@/api/api.js";
import { getCartCounts } from "@/api/order.js";
import { toLogin } from "@/libs/login.js";
import { mapState } from "pinia";
import productConSwiper from "@/components/productConSwiper";
import couponListWindow from "@/components/couponListWindow";
import productWindow from "@/components/productWindow/index.vue";
import userEvaluation from "@/components/userEvaluation";
import cusPreviewImg from "@/components/cus-previewImg/cus-previewImg.vue";
// import parser from "@/components/jyf-parser/jyf-parser";
import merHome from "@/components/merHome/index.vue";
let app = getApp();
import { setThemeColor } from "@/utils/setTheme.js";
import { Debounce } from "@/utils/validate.js";
import { isJSON } from "@/utils/index.js";
import { useAppStore } from "@/stores/app";
import GoodsImage from "@/components/easy-loadimage/goods-image.vue";
const appStore = useAppStore();
export default {
	components: {
		productConSwiper,
		couponListWindow,
		productWindow,
		userEvaluation,
		cusPreviewImg,
		// "jyf-parser": parser,
		merHome,
		statistic,
		GoodsImage,
	},
	data() {
		let that = this;
		return {
			skeletonShow: true, //骨架屏显示隐藏
			//属性是否打开
			coupon: {
				coupon: false,
				type: 0,
				list: [],
				count: [],
			},
			attrTxt: this.$t(`page.goodsDetail.choose1`), //属性页面提示
			attrValue: "", //已选属性
			animated: false, //购物车动画
			id: 0, //商品id
			replyCount: 0, //总评论数量
			reply: [], //评论列表
			productInfo: {}, //商品详情
			productValue: [], //系统属性
			guaranteeList: [], //保障服务
			couponList: [], //优惠券
			cart_num: 1, //购买数量
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			isOpen: false, //是否打开属性组件
			actionSheetHidden: true,
			storeImage: "", //海报产品图
			PromotionCode: "", //二维码图片
			posterbackgd: "/static/images/posterbackgd.png",
			circular: false,
			autoplay: false,
			interval: 3000,
			duration: 500,
			clientHeight: "",
			systemStore: {}, //门店信息
			replyChance: 0,
			CartCount: 0,
			isDown: true,
			posters: false,
			attr: {
				cartAttr: false,
				productAttr: [],
				productSelect: {},
				productInfo: {},
			},
			description: "",
			navActive: 0,
			retunTop: true, //顶部返回
			navH: "",
			navList: ["商品", "评价", "推荐", "详情"],
			opacity: 0,
			scrollY: 0,
			topArr: [],
			toView: "",
			height: 0,
			heightArr: [],
			lock: false,
			scrollTop: 0,
			tagStyle: {
				img: "width:100%;display:block;",
				table: "width:100%",
				video: "width:100%",
			},
			sliderImage: [],
			videoLink: "",
			qrcodeSize: 600,
			canvasStatus: false, //是否显示海报
			imagePath: "", //海报路径
			imgTop: "",
			errT: "",
			homeTop: 20,
			navbarRight: 0,
			userCollect: false,
			options: null,
			returnShow: true, //判断顶部返回是否出现
			type: "", //视频号普通商品类型
			theme: "theme3",
			indicatorBg: "",
			shareStatus: true,
			skuArr: [],
			currentPage: false,
			selectSku: {},
			defaultCoupon: [],
			couponDeaultType: [
				{
					useType: 1,
				},
			],
			rightDrawer: false,
			assureDrawer: false,
			merchantInfo: {},
			btnRight: 0,
			translateContent: "",
		};
	},
	beforeMount() {
		// #ifdef MP-WEIXIN
		this.btnRight = uni.getMenuButtonBoundingClientRect().width;
		// #endif
	},
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit("scroll");
	},
	mounted: function () {
		appStore.MerTypeList();
	},
	computed: mapState(useAppStore, ["isLogin", "uid", "chatUrl"]),

	onShow: function () {
		if (this.isLogin) {
			this.getCartCount();
		}
	},
	onLoad(options) {
		this.options = options;
		let that = this;
		var pages = getCurrentPages();
		that.returnShow = pages.length === 1 ? false : true;
		if (pages.length <= 1) {
			that.retunTop = false;
		}
		that.navH = appStore.navHeight;
		uni.getSystemInfo({
			success: function (res) {
				that.height = res.windowHeight;
			},
		});
		if (!options.scene && !options.id) {
			this.showSkeleton = false;
			this.$util.Tips(
				{
					title: "缺少参数无法查看商品",
				},
				{
					url: "/pages/index/index",
				}
			);
			return;
		}
		if (options.hasOwnProperty("id") || options.scene) {
			this.id = options.id;
			options.type == undefined || options.type == null
				? (that.type = "normal")
				: (that.type = options.type);
			appStore.PRODUCT_TYPE(that.type);
		}

		this.getGoodsDetails();
		//this.getCouponList();
		// this.getCouponType();
		this.getProductReplyList();
		this.getProductReplyCount();
		this.indicatorBg = setThemeColor();
	},
	methods: {
		toHome() {
			uni.switchTab({
				url: "/pages/index/index",
			});
		},
		/**
		 * 购物车手动填写
		 *
		 */
		iptCartNum: function (e) {
			const num =
				e && e <= this.productInfo.minQty ? this.productInfo.minQty : e;
			this.$set(this.attr.productSelect, "cart_num", num);
		},
		// 后退
		returns: function () {
			uni.navigateBack();
		},
		showNav() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		closeAssure() {
			this.assureDrawer = false;
		},
		tap: function (index) {
			var id = "past" + index;
			var index = index;
			var that = this;
			this.$set(this, "toView", id);
			this.$set(this, "navActive", index);
			this.$set(this, "lock", true);
			this.$set(
				this,
				"scrollTop",
				index > 0
					? that.topArr[index] - appStore.navHeight / 2
					: that.topArr[index]
			);
		},
		scroll: function (e) {
			var that = this,
				scrollY = e.detail.scrollTop;
			var opacity = scrollY / 500;
			opacity = opacity > 1 ? 1 : opacity;
			that.$set(that, "opacity", opacity);
			that.$set(that, "scrollY", scrollY);
			if (that.lock) {
				that.$set(that, "lock", false);
				return;
			}
			for (var i = 0; i < that.topArr.length; i++) {
				if (
					scrollY <
					that.topArr[i] - appStore.navHeight / 2 + that.heightArr[i]
				) {
					that.$set(that, "navActive", i);
					break;
				}
			}
		},
		/*
		 *去商品详情页
		 */
		goDetail(item) {
			uni.redirectTo({
				url: "/pages/goods_details/index?id=" + item.id,
			});
		},
		ChangCouponsClone: function () {
			this.$set(this.coupon, "coupon", false);
		},
		/**
		 * 购物车数量加和数量减
		 *
		 */
		ChangeCartNum: function (changeValue) {
			//changeValue:是否 加|减
			//获取当前变动属性
			let productSelect = this.productValue[this.attrValue];
			//如果没有属性,赋值给商品默认库存
			if (productSelect === undefined && !this.attr.productAttr.length)
				productSelect = this.attr.productSelect;
			//无属性值即库存为0；不存在加减；
			if (productSelect === undefined) return;
			let stock = productSelect.stock || 0;
			let num = this.attr.productSelect;
			if (changeValue) {
				num.cart_num++;
				if (num.cart_num > stock) {
					this.$set(this.attr.productSelect, "cart_num", stock);
					this.$set(this, "cart_num", stock);
				}
			} else {
				num.cart_num--;
				if (num.cart_num < this.attr.productInfo.minQty) {
					this.$set(
						this.attr.productSelect,
						"cart_num",
						this.attr.productInfo.minQty
					);
					this.$set(this, "cart_num", this.attr.productInfo.minQty);
				}
			}
		},
		attrVal(val) {
			this.$set(
				this.attr.productAttr[val.indexw],
				"index",
				this.attr.productAttr[val.indexw].attrValues[val.indexn]
			);
		},
		/**
		 * 属性变动赋值
		 *
		 */
		ChangeAttr: function (res) {
			let productSelect = this.productValue[res];
			this.$set(this, "selectSku", productSelect);
			if (productSelect) {
				this.$set(this.attr.productSelect, "image", productSelect.image);
				this.$set(this.attr.productSelect, "price", productSelect.price);
				this.$set(this.attr.productSelect, "stock", productSelect.stock);
				this.$set(this.attr.productSelect, "unique", productSelect.id);
				this.$set(
					this.attr.productSelect,
					"cart_num",
					this.attr.productInfo.minQty
				);
				this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);
				this.$set(this.attr.productSelect, "otPrice", productSelect.otPrice);
				this.$set(this, "attrValue", res);
				this.$set(this, "attrTxt", this.$t(`page.goodsDetail.choose`));
			} else {
				this.$set(this.attr.productSelect, "image", this.productInfo.image);
				this.$set(this.attr.productSelect, "price", this.productInfo.price);
				this.$set(this.attr.productSelect, "stock", 0);
				this.$set(this.attr.productSelect, "unique", this.productInfo.id);
				this.$set(
					this.attr.productSelect,
					"cart_num",
					this.attr.productInfo.minQty
				);
				this.$set(
					this.attr.productSelect,
					"vipPrice",
					this.productInfo.vipPrice
				);
				this.$set(this.attr.productSelect, "otPrice", this.productInfo.otPrice);
				this.$set(this, "attrValue", "");
				this.$set(this, "attrTxt", this.$t(`page.goodsDetail.choose1`));
			}
		},
		/**
		 * 领取完毕移除当前页面领取过的优惠券展示
		 */
		ChangCoupons: function (e) {
			let coupon = e;
			let couponList = this.$util.ArrayRemove(this.couponList, "id", coupon.id);
			this.$set(this, "couponList", couponList);
			this.getCouponList();
		},
		/**
		 * 获取产品详情
		 *
		 */
		getGoodsDetails: function () {
			let that = this;
			getProductDetail(that.id, that.type)
				.then((res) => {
					let productInfo = res.data.productInfo;
					//兼容旧数据
					this.translateContent = productInfo.content;
					// 字符串数组转数组；
					let sliderImage = productInfo.sliderImage.split(',');
					that.$set(that, "sliderImage", sliderImage);
					that.$set(that, "productInfo", productInfo);
					that.$set(that, "guaranteeList", res.data.guaranteeList || []); //保障服务信息
					that.$set(that, "merchantInfo", res.data.merchantInfo);
					// that.$set(that, "description", this.translateContent);
					that.$set(that, "userCollect", res.data.userCollect);
					that.$set(that.attr, "productAttr", res.data.productAttr);
					that.$set(that.attr, "productInfo", res.data.productInfo);
					that.$set(that, "productValue", res.data.productValue);
					that.getCouponList(2);
					that.getCouponType();
					for (let key in res.data.productValue) {
						let obj = res.data.productValue[key];
						that.skuArr.push(obj);
					}
					this.$set(this, "selectSku", that.skuArr[0]);
					uni.setNavigationBarTitle({
						title: productInfo.storeName.substring(0, 7),
					});

					let productAttr = this.attr.productAttr.map((item) => {
						return {
							attrName: item.attrName,
							attrValues: item.attrValues.split(","),
							id: item.id,
							isDel: item.isDel,
							productId: item.productId,
							type: item.type,
						};
					});
					this.$set(this.attr, "productAttr", productAttr);
					if (that.isLogin) {
						that.getCartCount();
					}
					setTimeout(function () {
						that.infoScroll();
					}, 500);

					that.DefaultSelect();
					setTimeout(() => {
						this.defaultCoupon = this.coupon.list;
						this.skeletonShow = false;
					}, 1000);
				})
				.catch((err) => {
					this.skeletonShow = false;
					//状态异常返回上级页面
					that.$util.Tips(
						{
							title: err.toString(),
						},
						{
							tab: 3,
							url: 1,
						}
					);
				});
		},
		getProductReplyList: function () {
			getReplyProduct(this.id).then((res) => {
				this.reply = res.data.productReply ? [res.data.productReply] : [];
			});
		},
		getProductReplyCount: function () {
			let that = this;
			getReplyConfig(that.id).then((res) => {
				that.$set(that, "replyChance", res.data.replyChance * 100);
				that.$set(that, "replyCount", res.data.sumCount);
			});
		},
		infoScroll: function () {
			var that = this,
				topArr = [],
				heightArr = [];
			for (var i = 0; i < that.navList.length; i++) {
				//productList
				//获取元素所在位置
				var query = uni.createSelectorQuery().in(this);
				var idView = "#past" + i;
				// if (!that.data.good_list.length && i == 2) {
				//   var idView = "#past" + 3;
				// }
				query.select(idView).boundingClientRect();
				query.exec(function (res) {
					var top = res[0].top;
					var height = res[0].height;
					topArr.push(top);
					heightArr.push(height);
					that.$set(that, "topArr", topArr);
					that.$set(that, "heightArr", heightArr);
				});
			}
		},
		/**
		 * 默认选中属性
		 *
		 */
		DefaultSelect: function () {
			let productAttr = this.attr.productAttr;
			let value = [];
			//默认选中每种规格的第一个
			productAttr.forEach((item) => {
				value.push(item.attrValues[0]);
			});
			for (let i = 0; i < value.length; i++) {
				this.$set(productAttr[i], "index", value[i]);
			}

			//sort();排序函数:数字-英文-汉字；
			let productSelect = this.productValue[value.join(",")];
			this.$set(this.attr.productSelect, "currency", this.productInfo.currency);
			if (productSelect && productAttr.length) {
				this.$set(
					this.attr.productSelect,
					"storeName",
					this.productInfo.storeName
				);
				this.$set(this.attr.productSelect, "image", productSelect.image);
				this.$set(this.attr.productSelect, "price", productSelect.price);
				this.$set(this.attr.productSelect, "stock", productSelect.stock);
				this.$set(this.attr.productSelect, "unique", productSelect.id);
				this.$set(this.attr.productSelect, "cart_num", this.productInfo.minQty);
				this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice); //attr.productSelect.otPrice
				this.$set(this.attr.productSelect, "otPrice", productSelect.otPrice);
				this.$set(this, "attrValue", value.join(","));
				this.$set(this, "attrTxt", this.$t(`page.goodsDetail.choose`));
			} else if (!productSelect && productAttr.length) {
				this.$set(
					this.attr.productSelect,
					"storeName",
					this.productInfo.storeName
				);
				this.$set(this.attr.productSelect, "image", this.productInfo.image);
				this.$set(this.attr.productSelect, "price", this.productInfo.price);
				this.$set(this.attr.productSelect, "stock", 1000);
				this.$set(this.attr.productSelect, "unique", this.productInfo.id);
				this.$set(this.attr.productSelect, "cart_num", this.productInfo.minQty);
				this.$set(
					this.attr.productSelect,
					"vipPrice",
					this.productInfo.vipPrice
				);
				this.$set(this.attr.productSelect, "otPrice", this.productInfo.otPrice);
				this.$set(this, "attrValue", "");
				this.$set(this, "attrTxt", "请选择");
			} else if (!productSelect && !productAttr.length) {
				this.$set(
					this.attr.productSelect,
					"storeName",
					this.productInfo.storeName
				);
				this.$set(this.attr.productSelect, "image", this.productInfo.image);
				this.$set(this.attr.productSelect, "price", this.productInfo.price);
				this.$set(this.attr.productSelect, "stock", this.productInfo.stock);
				this.$set(this.attr.productSelect, "unique", this.productInfo.id || "");
				this.$set(this.attr.productSelect, "cart_num", this.productInfo.minQty);
				this.$set(
					this.attr.productSelect,
					"vipPrice",
					this.productInfo.vipPrice
				);
				this.$set(this.attr.productSelect, "otPrice", this.productInfo.otPrice);
				this.$set(this, "attrValue", "");
				this.$set(this, "attrTxt", "请选择");
			}
		},
		/**
		 * 获取优惠券
		 *
		 */
		getCouponList(type) {
			let that = this,
				obj = {
					merId: that.productInfo.merId,
					page: 1,
					limit: 20,
					productId: that.id,
					useType: type,
				};
			getCoupons(obj).then((res) => {
				that.$set(that.coupon, "list", res.data.list);
			});
		},
		async getCouponType() {
			let obj = {
				merId: this.productInfo.merId,
				page: 1,
				limit: 20,
				productId: this.id,
				useType: 2,
			};
			//在onLoad只调用一次，获取默认的类型作为打开优惠券列表的参数，不会随着切换变化
			let dataList = await getCoupons(obj);
			if (dataList.length) {
				this.couponDeaultType = dataList.data.list;
				this.$set(this.coupon, "type", dataList);
			}
		},
		tabCouponType(type) {
			this.$set(this.coupon, "type", type);
			this.getCouponList(type);
		},

		ChangCouponsUseState(index) {
			let that = this;
			that.coupon.list[index].isUse = true;
			that.$set(that.coupon, "list", that.coupon.list);
			that.$set(that.coupon, "coupon", false);
		},
		/**
		 *
		 *
		 * 收藏商品
		 */
		setCollect: function () {
			let that = this;
			if (this.isLogin === false) {
				toLogin();
			} else {
				if (this.userCollect) {
					collectDel(this.productInfo.id).then((res) => {
						that.$set(that, "userCollect", !that.userCollect);
					});
				} else {
					collectAdd(this.productInfo.id).then((res) => {
						that.$set(that, "userCollect", !that.userCollect);
					});
				}
			}
		},
		/**
		 * 打开属性插件
		 */
		selecAttr: function () {
			this.$set(this.attr, "cartAttr", true);
			this.$set(this, "isOpen", true);
		},
		/**
		 * 打开优惠券插件
		 */
		couponTap: function () {
			let that = this;
			if (that.isLogin === false) {
				toLogin();
			} else {
				that.getCouponList(this.couponDeaultType[0].useType); //打开弹框默认请求商品券
				that.$set(that.coupon, "coupon", true);
			}
		},
		onMyEvent: function () {
			this.$set(this.attr, "cartAttr", false);
			this.$set(this, "isOpen", false);
		},
		/**
		 * 打开属性加入购物车
		 *
		 */
		joinCart: function (e) {
			//是否登录
			if (!this.isLogin) {
				toLogin();
			} else {
				this.goCat(1);
			}
		},
		/*
		 * 加入购物车
		 */
		goCat: function (num) {
			let that = this,
				productSelect = that.productValue[this.attrValue];
			//打开属性
			if (that.attrValue) {
				//默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
				that.attr.cartAttr = !that.isOpen ? true : false;
			} else {
				if (that.isOpen) that.attr.cartAttr = true;
				else that.attr.cartAttr = !that.attr.cartAttr;
			}
			//只有关闭属性弹窗时进行加入购物车
			if (that.attr.cartAttr === true && that.isOpen === false)
				return (that.isOpen = true);
			//如果有属性,没有选择,提示用户选择
			// if (
			// 	that.attr.productAttr.length &&
			// 	productSelect.stock === 0 &&
			// 	that.isOpen === true
			// )
			// return that.$util.Tips({
			// 	title: "产品库存不足，请选择其它"
			// });4
			if (num === 1) {
				let q = [
					{
						productId: parseFloat(that.id),
						cartNum: parseFloat(this.attr.productSelect.cart_num),
						isNew: false,
						productAttrUnique:
							that.attr.productSelect !== undefined
								? that.attr.productSelect.unique
								: that.productInfo.id,
					},
				];
				postCartAdd(q)
					.then(function (res) {
						that.isOpen = false;
						that.attr.cartAttr = false;
						that.$util.Tips({
							title: that.$t("message.tips.shoppingSU"),
							success: () => {
								that.getCartCount(true);
							},
						});
					})
					.catch((res) => {
						that.isOpen = false;
						return that.$util.Tips({
							title: res,
						});
					});
			} else {
				this.getPreOrder();
			}
		},
		/**
		 * 获取购物车数量
		 * @param boolean 是否展示购物车动画和重置属性
		 */
		getCartCount: function (isAnima) {
			let that = this;
			const isLogin = that.isLogin;
			if (isLogin) {
				getCartCounts(true, "total").then((res) => {
					that.CartCount = res.data.count;
					//加入购物车后重置属性
					if (isAnima) {
						that.animated = true;
						setTimeout(function () {
							that.animated = false;
						}, 500);
					}
				});
			}
		},
		/**
		 * 立即购买
		 */
		goBuy: Debounce(function (e) {
			if (this.isLogin === false) {
				toLogin();
			} else {
				this.goCat(0);
			}
		}),
		/**
		 * 预下单
		 */
		getPreOrder: function () {
			this.$Order.getPreOrder(this.type === "normal" ? "buyNow" : "video", [
				{
					attrValueId: parseFloat(this.attr.productSelect.unique),
					productId: parseFloat(this.id),
					productNum: parseFloat(this.attr.productSelect.cart_num),
				},
			]);
		},
		//替换安全域名
		setDomain: function (url) {
			url = url ? url.toString() : "";
			//本地调试打开,生产请注销
			if (url.indexOf("https://") > -1) return url;
			else return url.replace("http://", "https://");
		},
		//点击sku图片打开轮播图
		showImg(index) {
			this.$refs.cusPreviewImg.open(this.selectSku.suk);
		},
		//滑动轮播图选择商品
		changeSwitch(e) {
			let productSelect = this.skuArr[e];
			this.$set(this, "selectSku", productSelect);
			var skuList = productSelect.suk.split(",");
			skuList.forEach((i, index) => {
				this.$set(this.attr.productAttr[index], "index", skuList[index]);
			});
			if (productSelect) {
				this.$set(this.attr.productSelect, "image", productSelect.image);
				this.$set(this.attr.productSelect, "price", productSelect.price);
				this.$set(this.attr.productSelect, "stock", productSelect.stock);
				this.$set(this.attr.productSelect, "unique", productSelect.id);
				this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);
				this.$set(this, "attrTxt", this.$t(`page.goodsDetail.choose`));
				this.$set(this, "attrValue", productSelect.suk);
			}
		},
		getFileType(fileName) {
			// 后缀获取
			let suffix = "";
			// 获取类型结果
			let result = "";
			try {
				const flieArr = fileName.split(".");
				suffix = flieArr[flieArr.length - 1];
			} catch (err) {
				suffix = "";
			}
			// fileName无后缀返回 false
			if (!suffix) {
				return false;
			}
			suffix = suffix.toLocaleLowerCase();
			// 图片格式
			const imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
			// 进行图片匹配
			result = imglist.find((item) => item === suffix);
			if (result) {
				return "image";
			}
			// 匹配 视频
			const videolist = [
				"mp4",
				"m2v",
				"mkv",
				"rmvb",
				"wmv",
				"avi",
				"flv",
				"mov",
				"m4v",
			];
			result = videolist.find((item) => item === suffix);
			if (result) {
				return "video";
			}
			// 其他 文件类型
			return "other";
		},
		videoPause(e) {
			// #ifdef APP-PLUS
			this.isPlay = true;
			this.autoplay = true;
			// #endif
		},
	},
};
</script>

<style scoped lang="scss">
.userEvaluation .goods-text {
	display: -webkit-box;
	max-height: 60rpx;
}

.superior {
	::v-deep .name,
	::v-deep .icon-gengduo {
		color: #333 !important;
	}

	::v-deep .store {
		padding: 0 !important;
	}
}

.product-con {
	height: 100%;
	// padding-top: var(--status-bar-height);
	.wrapper {
		.label {
			flex-wrap: wrap;
			.label-item {
				margin-right: 20rpx;
			}
		}
	}
}

.x-money {
	font-size: 28rpx;
	font-weight: 700;
	font-family: D-DIN-Bold, D-DIN;
	@include price_color(theme);
}

.select_nav {
	width: 170rpx !important;
	height: 60rpx !important;
	border-radius: 33rpx;
	background: rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(0, 0, 0, 0.07);
	color: #000;
	position: fixed;
	font-size: 18px;
	line-height: 62rpx;
	z-index: 1000;
	left: 14rpx;
}

.px-20 {
	padding: 0 20rpx 0;
}

.nav_line {
	content: "";
	display: inline-block;
	width: 1px;
	height: 34rpx;
	background: #b3b3b3;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
.bgwhite {
	background: #fff !important;
}
.input {
	display: flex;
	align-items: center;
	flex: 1;
	height: 58rpx;
	padding: 0 0 0 30rpx;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 33rpx;
	color: #666;
	font-size: 26rpx;

	margin: 0 20rpx;
	background: rgba(255, 255, 255, 0.3);

	.iconfont {
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #666666;
	}
}

.tab_nav {
	width: 100%;
	padding: 0 30rpx 0;
}

.right_select {
	width: 58rpx;
	height: 58rpx;
	right: 20rpx;
	text-align: center;
	line-height: 58rpx;
}

.dialog_nav {
	position: absolute;
	right: 14rpx;
	width: 240rpx;
	background: #ffffff;
	box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.08);
	z-index: 310;
	border-radius: 14rpx;

	&::before {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		right: 8px;
		top: -9px;
		border-bottom: 10px solid #f5f5f5;
		border-left: 10px solid transparent;
		/*transparent 表示透明*/
		border-right: 10px solid transparent;
	}
}

.dialog_nav_item {
	width: 100%;
	height: 84rpx;
	line-height: 84rpx;
	padding: 0 20rpx 0;
	box-sizing: border-box;
	border-bottom: #eee;
	font-size: 28rpx;
	color: #333;
	position: relative;

	.iconfont {
		font-size: 32rpx;
	}
}

.dialog_after {
	::after {
		content: "";
		position: absolute;
		width: 172rpx;
		height: 1px;
		background-color: #eeeeee;
		bottom: 0;
		right: 0;
	}
}

.pl-20 {
	padding-left: 20rpx;
}

.activity {
	height: 34rpx;
	padding: 0 30rpx;
	@include coupons_border_color(theme);
	@include main_color(theme);
	font-size: 24rpx;
	font-weight: 400;
	line-height: 34rpx;
	position: relative;
	margin-left: 4rpx;
	border-radius: 8rpx;
}

.product-con .wrapper .coupon .activity:before {
	content: " ";
	position: absolute;
	width: 7rpx;
	height: 10rpx;
	border-radius: 0 7rpx 7rpx 0;
	@include coupons_border_color(theme);
	background-color: #fff !important;
	bottom: 50%;
	left: -5rpx;
	margin-bottom: -6rpx;
	// border-left-color: #fff ;
	@include white_left_border;
}

.product-con .wrapper .coupon .activity:after {
	content: " ";
	position: absolute;
	width: 7rpx;
	height: 10rpx;
	border-radius: 7rpx 0 0 7rpx;
	@include coupons_border_color(theme);
	background-color: #fff;
	right: -5rpx;
	bottom: 50%;
	margin-bottom: -6rpx;
	// border-right-color: #fff;
	@include white_right_border;
}

.justify-center {
	justify-content: center;
}

.align-center {
	align-items: center;
}

.align-baseline {
	align-items: baseline;
}

.bg_color {
	@include main_bg_color(theme);
}

.vip_icon {
	width: 44rpx;
	height: 28rpx;
}

.pl-2 {
	padding-left: 20rpx;
}

.vip_money {
	background: #ffe7b9;
	border-radius: 4px;
	font-size: 22rpx;
	color: #333;
	line-height: 28rpx;
	text-align: center;
	padding: 0 6rpx;
	box-sizing: border-box;
	margin-left: -4rpx;
}

.theme_price {
	@include price_color(theme);
}

.activityName {
	line-height: 44rpx;
}

.userEvaluation {
	i {
		display: inline-block;
	}
}

.bntVideo {
	width: auto !important;

	.buy {
		border-radius: 50rpx !important;
	}
}

.attribute {
	.line1 {
		width: 600rpx;
	}
}

.chat-btn {
	background-color: antiquewhite !important;
}

.activity_pin {
	width: auto;
	height: 44rpx;
	line-height: 44rpx;
	// background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(250, 101, 20, 1) 100%);
	@include linear-gradient(theme);
	opacity: 1;
	border-radius: 22rpx;
	padding: 0 15rpx;
	// margin-left: 19rpx;
}

.activity_miao {
	width: auto;
	height: 44rpx;
	line-height: 44rpx;
	padding: 0 15rpx;
	// background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
	@include linear-gradient(theme);
	opacity: 1;
	border-radius: 22rpx;
	margin-left: 19rpx;
}

.iconfonts {
	color: #fff !important;
	font-size: 28rpx;
}

.activity_title {
	font-size: 24rpx;
	color: #fff;
}

.activity_kan {
	width: auto;
	height: 44rpx;
	line-height: 44rpx;
	padding: 0 15rpx;
	@include linear-gradient(theme);
	opacity: 1;
	border-radius: 22rpx;
	margin-left: 19rpx;
}

.mask {
	z-index: 300 !important;
}

.head-bar {
	background: #fff;
}

.generate-posters {
	width: 100%;
	height: 318rpx;
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 388;
	transform: translate3d(0, 100%, 0);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	border-top: 1rpx solid #eee;

	.generateCon {
		height: 220rpx;
	}

	.generateClose {
		height: 98rpx;
		font-size: 28rpx;
		color: #333333;
		border-top: 1px solid #eee;
	}

	.item {
		.pictrue {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin: 0 auto 6rpx auto;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
}

.generate-posters.on {
	transform: translate3d(0, 0, 0);
}

.generate-posters .item {
	flex: 1;
	text-align: center;
	font-size: 30rpx;
}

.generate-posters .item .iconfont {
	font-size: 80rpx;
	color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
	color: #5391f1;
}

.generate-posters .item .iconfont.icon-haowuquan1 {
	color: #ff954d;
}

.product-con .footer {
	padding: 0 20rpx 0 30rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	z-index: 277;
	border-top: 1rpx solid #f0f0f0;
	height: 100rpx;
	height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
	height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}

.product-con .footer .item {
	font-size: 18rpx;
	color: #666;
	text-align: center;
}

.product-con .footer .item .iconfont {
	text-align: center;
	font-size: 40rpx;
}

.product-con .footer .item .iconfont.icon-shoucang1 {
	@include main_color(theme);
}

.product-con .footer .item .iconfont.icon-gouwuche {
	font-size: 40rpx;
	position: relative;
}

.product-con .footer .item .iconfont.icon-gouwuche .num {
	color: #fff;
	position: absolute;
	font-size: 18rpx;
	padding: 2rpx 8rpx 3rpx;
	border-radius: 200rpx;
	top: -10rpx;
	right: -10rpx;
}

.product-con .footer .bnt {
	width: 500rpx;
	height: 76rpx;
}

.product-con .footer .bnt .bnts {
	width: 250rpx;
	height: 76rpx;
	color: #fff;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 26rpx;
}

.joinCart {
	border-radius: 50rpx 0 0 50rpx;
	@include left_color(theme);
}

.buy {
	border-radius: 0 50rpx 50rpx 0;
	@include main_bg_color(theme);
}

.product-con .store-info {
	margin-top: 20rpx;
	background-color: #fff;
}

.product-con .store-info .title {
	padding: 15rpx 30rpx;
	font-size: 28rpx;
	color: #282828;
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 1px solid #f5f5f5;
}

.product-con .store-info .info {
	padding: 0 30rpx;
	height: 126rpx;
}

.product-con .store-info .info .picTxt {
	width: 615rpx;
}

.product-con .store-info .info .picTxt .pictrue {
	width: 76rpx;
	height: 76rpx;
}

.product-con .store-info .info .picTxt .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 6rpx;
}

.product-con .store-info .info .picTxt .text {
	width: 522rpx;
}

.product-con .store-info .info .picTxt .text .name {
	font-size: 30rpx;
	color: #282828;
}

.product-con .store-info .info .picTxt .text .address {
	font-size: 24rpx;
	color: #666;
	margin-top: 3rpx;
}

.product-con .store-info .info .picTxt .text .address .iconfont {
	color: #707070;
	font-size: 18rpx;
	margin-left: 10rpx;
}

.product-con .store-info .info .picTxt .text .address .addressTxt {
	max-width: 480rpx;
}

.product-con .store-info .info .iconfont {
	font-size: 40rpx;
}

.product-con .superior {
	background-color: #fff;
	margin-top: 24rpx;
	padding: 24rpx;
}

.product-con .superior .title {
	height: 98rpx;
}

.product-con .superior .title image {
	width: 20rpx;
	height: 20rpx;
}

.product-con .superior .title .titleTxt {
	margin: 0 10rpx;
	font-size: 30rpx;
	color: #333333;
}

.product-con .superior .slider-banner {
	width: 100%;
	margin: 0 auto;
	position: relative;
	margin-top: 26rpx;
}

.product-con .superior .slider-banner swiper {
	height: 100%;
	width: 100%;
}

.product-con .superior .slider-banner swiper-item {
	height: 100%;
}

.product-con .superior .slider-banner .list {
	width: 100%;
}

.product-con .superior .slider-banner .list .item {
	width: 146rpx;
	margin: 0 22rpx 0rpx 0;
	font-size: 26rpx;
}

.product-con .superior .slider-banner .list .item:last-of-type {
	margin-right: 0;
}

.product-con .superior .slider-banner .list .item .pictrue {
	position: relative;
	width: 100%;
	height: 146rpx;
	border-radius: 6rpx;
	overflow: hidden;
}

.product-con .superior .slider-banner .list .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 6rpx;
}

.product-con .superior .slider-banner .list .item .name {
	color: #282828;
	margin-top: 12rpx;
}

.product-con .superior .slider-banner .swiper-pagination-bullet {
	background-color: #999;
}

.product-con .superior .slider-banner .swiper-pagination-bullet-active {
	background-color: $theme-color;
}

button {
	padding: 0;
	margin: 0;
	line-height: normal;
	background-color: #fff;
}

button::after {
	border: 0;
}

action-sheet-item {
	padding: 0;
	height: 240rpx;
	align-items: center;
	display: flex;
}

.contact {
	font-size: 16px;
	width: 50%;
	background-color: #fff;
	padding: 8rpx 0;
	border-radius: 0;
	margin: 0;
	line-height: 2;
}

.contact::after {
	border: none;
}

.action-sheet {
	font-size: 17px;
	line-height: 1.8;
	width: 50%;
	position: absolute;
	top: 0;
	right: 0;
	padding: 25rpx 0;
}

.canvas {
	position: fixed;
	z-index: -5;
	opacity: 0;
}

.poster-pop {
	position: fixed;
	width: 450rpx;
	height: 714rpx;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: -432rpx;
	z-index: 399;
}

.poster-pop image {
	width: 100%;
	height: 100%;
	display: block;
}

.poster-pop .close {
	width: 46rpx;
	height: 75rpx;
	position: fixed;
	right: 0;
	top: -73rpx;
	display: block;
}

.poster-pop .save-poster {
	background-color: #df2d0a;
	font-size: ：22rpx;
	color: #fff;
	text-align: center;
	height: 76rpx;
	line-height: 76rpx;
	width: 100%;
}

.poster-pop .keep {
	color: #fff;
	text-align: center;
	font-size: 25rpx;
	margin-top: 10rpx;
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

.pro-wrapper .iconn {
	background-image: url("");
	width: 100rpx;
	height: 100rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
}

.pro-wrapper .iconn.iconn1 {
	background-image: url("");
}

.pictrue_log {
	width: 80upx;
	height: 40upx;
	border-radius: 10upx 0 12upx 0;
	line-height: 40upx;
	font-size: 24upx;
}

.pictrue_log_class {
	z-index: 3;
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(rgba(246, 122, 56, 1)),
		to(rgba(241, 27, 9, 1))
	);
	background: linear-gradient(
		90deg,
		rgba(246, 122, 56, 1) 0%,
		rgba(241, 27, 9, 1) 100%
	);
	opacity: 1;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	text-align: center;
}

.tab_nav .header {
	width: 100%;
	height: 96rpx;
	padding: 0 30rpx 0;
	font-size: 30rpx;
	color: #050505;
	background-color: #fff;
}

.icon-xiangzuo {
	/* #ifdef H5 */
	top: 20rpx !important;
	/* #endif */
}

.navbar .header .item {
	position: relative;
	margin: 0 25rpx;
}

.navbar .header .item.on:before {
	position: absolute;
	width: 60rpx;
	height: 5rpx;
	background-repeat: no-repeat;
	content: "";
	@include linear-gradient(theme);
	bottom: -10rpx;
	left: 50%;
	margin-left: -28rpx;
}

.navbar {
	position: sticky;
	background-color: #fff;
	padding-top: var(--status-bar-height);
	top: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	// background-color: transparent;
	// backdrop-filter: blur(4px);
	display: flex;
	flex-direction: column;
}

.navbar .navbarH {
	position: relative;
}

.navbar .navbarH .navbarCon {
	height: 100rpx;
	width: 100%;
	display: flex;
	align-items: center;
}

.h5_back {
	color: #000;
	font-size: 32rpx;
	text-align: center;
	width: 58rpx;
	height: 58rpx;
	background: rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
}

.share-box {
	z-index: 1000;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	image {
		width: 100%;
		height: 100%;
	}
}

.mask_transparent {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 300;
}

.px-12 {
	padding-left: 12rpx;
	padding-right: 12rpx;
}

.font-44 {
	font-size: 44rpx;
}

.font_color {
	@include main_color(theme);
}

.attrImg {
	width: 66rpx;
	height: 66rpx;
	border-radius: 6rpx;
	display: block;
	margin-right: 14rpx;
}

.switchTxt {
	flex: 1;
	line-height: 54rpx;
	box-sizing: border-box;
	background: #eeeeee;
	padding-right: 0 24rpx 0;
	border-radius: 8rpx;
	text-align: center;
}

.text-333 {
	color: #333;
	font-size: 26rpx;
}

.text-666 {
	font-size: 26rpx;
	color: #666;
	margin-left: 4rpx;
}

.fw-bold {
	font-weight: 600;
}

.ensure {
	width: 100%;
	background-color: #fff;
	padding-bottom: 22rpx;
	padding-bottom: calc(
		22rpx + constant(safe-area-inset-bottom)
	); ///兼容 IOS<11.2/
	padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

	.title {
		font-size: 32rpx;
		color: #282828;
		text-align: center;
		margin: 38rpx 0 36rpx 0;
		position: relative;

		.iconfont {
			position: absolute;
			right: 30rpx;
			top: 0;
			font-size: 36rpx;
		}
	}

	.list {
		height: 750rpx;
		margin: 0 30rpx;
		overflow-x: hidden;
		overflow-y: auto;

		.item {
			margin-bottom: 52rpx;

			.pictrue {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.text {
				width: 618rpx;
				color: #999999;
				font-size: 28rpx;

				.name {
					color: #333333;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.bnt {
		width: 690rpx;
		height: 86rpx;
		text-align: center;
		line-height: 86rpx;
		border-radius: 43rpx;
		@include main_bg_color(theme);
		font-size: 30rpx;
		color: #fff;
		margin: 0 auto;
	}
}

.ensure.on {
	transform: translate3d(0, 0, 0);
}

::v-deep .tui-drawer-container_bottom {
	border-radius: 16rpx 16rpx 0 0;
}

.detailPd {
	// position: relative;
}

.joinCart.bg-color-hui,
.buy.bg-color-hui {
	background-color: #bbb !important;
}

.praise {
	display: flex;
	text-align: right;
	flex: 1;
}
.mb30 {
	margin-bottom: 24rpx;
}
.goods-info {
	margin-top: 24rpx;
}
.product-intro {
	margin-top: 24rpx;
	.conter {
		padding-bottom: 24rpx;
	}
}
.old-price {
	margin-left: 30rpx;
	font-size: 30rpx;
	color: #999;
	text-decoration: underline;
	position: relative;
	::v-deep .statistic {
		text-decoration: line-through;
	}
}
.info-wrap {
	margin-top: 770rpx;
}
</style>
